<template>
    <!--客服专员-->
    <div class="first_audit">
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <!--ID-->
                <el-table-column align="left" label="ID" prop="id" ></el-table-column>
                <!--账号名称-->
                <el-table-column align="left" prop="username" :label="$t('common.accountName')" min-width="150">
                    <template slot-scope="{ row }">
                        <a @click="searchAuditOrder(row)" type="text" href="javascript:void(0);">{{ row.username }}</a>
                    </template>
                </el-table-column>
                <!--角色类型-->
                <el-table-column align="left" prop="typeIdName" :label="$t('common.roleType')">
                    <template slot-scope="scope">{{ $i18n.locale === 'zhCN' ? scope.row.roleName : scope.row.typeIdName }}</template>
                </el-table-column>
                <!--所属组别-->
                <el-table-column align="left" prop="leader" :label="$t('authority.ownGroup')" min-width="150"></el-table-column>
                <!--剩余单量-->
                <el-table-column align="left" prop="remainOrderCount" :label="$t('authority.remainingOrder')"></el-table-column>
                <!--每日进件上限-->
                <el-table-column align="left" prop="maxNum" :label="$t('authority.everydayLimit')">
                    <template slot-scope="scope">
                        <span style="cursor: pointer;" @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.maxNum }}</span>
                    </template>
                </el-table-column>
                <!--负责APP-->
                <el-table-column align="left" prop="appName" :label="$t('salesManage.responsibleAPP')" min-width="120">
                    <template slot-scope="{row}">
                        <a v-if="row.appName" href="javascript:void(0);" @click="showSetting(row)">
                            <div v-for="item in row.appName.split(',')" :key="item">{{ item }}</div>
                        </a>
                    </template>
                </el-table-column>
                <!--营销类型-->
                <el-table-column align="left" prop="marketingType" :label="$t('salesManage.marketingType')">
                    <template slot-scope="{row}">
                        <a v-if="row.marketingType" href="javascript:void(0);" @click="showSetting(row)">
                            <div v-for="item in row.marketingType.split(',')" :key="item">{{ keyMap.marketingType(item) }}</div>
                        </a>
                    </template>
                </el-table-column>
                <!--是否进件-->
                <el-table-column align="left" prop="entrySwitch" :label="$t('common.isAssignOrder')">
                    <template slot-scope="scope">
                        <el-switch @change="changeStatus(scope.row)" v-model="scope.row.entrySwitch" active-value="1" inactive-value="0"></el-switch>
                    </template>
                </el-table-column><!--是否进件-->
                <!--去分组-->
                <el-table-column align="left" :label="$t('authority.doGroup')">
                    <template slot-scope="scope"><el-button @click="showGroupDialog(scope.row)" type="text">{{$t('authority.verifyGroup')}}</el-button></template>
                </el-table-column><!--去分组-->
            </el-table><!--end table-->
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

        <!--设置每日进件上限-->
        <alert-dialog :visible.sync="showNumDialog" width="416px" :title="$t('authority.setEverydayUpperCase')">
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <!--每日进件上限-->
                <el-form-item prop="maxNum" :label="$t('authority.everydayLimit')">
                    <el-input v-model="form.maxNum" type="text" :placeholder="$t('authority.everydayLimit')"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showNumDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="setNum" type="primary">{{$t('common.submit')}}</el-button>
            </div>
        </alert-dialog><!--设置每日进件上限end-->

        <!--电销人员分组-->
        <alert-dialog :visible.sync="showSetGroupDialog" width="416px" :title="$t('authority.verifyGroup')">
            <el-form ref="form" :model="groupForm" label-position="top">
                <!--账号名称-->
                <el-form-item :label="$t('common.accountName')">
                    <el-input :disabled="true" v-model="groupForm.username" type="text" :placeholder="$t('common.accountName')">=</el-input>
                </el-form-item>
                <!--组别列表-->
                <el-form-item :label="$t('authority.groupList')">
                    <el-select v-model="groupForm.leaderId" :placeholder="$t('authority.chooseGroup')" style="width: 100%;">
                        <el-option v-for="item in captainList" :key="item.userId" :value="item.userId" :label="item.username"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showSetGroupDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="setGroup" type="primary">{{$t('common.save')}}</el-button>
            </div>
        </alert-dialog>
        <!--修改分组end-->

        <!--分配APP&营销类型-->
        <alert-dialog :visible.sync="showSettingDialog" width="416px" :title="$t('salesManage.salesmanSetting')">
            <el-form ref="settingForm" :model="settingForm" :rules="settingRules" label-position="top">
                <!--负责APP-->
                <el-form-item prop="appName" :label="$t('salesManage.responsibleAPP')">
                    <select-app-list v-model="settingForm.appName" :multiple="true" :placeholder="$t('salesManage.responsibleAPP')"></select-app-list>
                </el-form-item>
                <!--营销类型-->
                <el-form-item prop="marketingType" :label="$t('salesManage.marketingType')">
                    <el-select v-model="settingForm.marketingType" :multiple="true" :placeholder="$t('salesManage.marketingType')" style="width: 100%;">
                        <el-option v-for="item in keyMap.marketingType()" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showSettingDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="settingUserInfo" type="primary">{{$t('common.submit')}}</el-button>
            </div>
        </alert-dialog>
        <!--分配APP&营销类型end-->
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
.data_list{
    background-color: #fff;
    padding: 10px 16px;
}
</style>
